<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          {{ pageName }}
        </p>
        <div slot="extra">
          <div style="display: flex">
            <Button
              @click="downloadfile"
              type="primary"
              :loading="downLoding"
              style="margin-right: 10px"
              >下载表格模板</Button
            >
            <Upload
              :max-size="2048"
              :before-upload="handleBeforeUpload"
              :data="uploadData"
              :show-upload-list="false"
              :on-success="handleSuccess"
              :on-error="handleError"
              :headers="Uploadhearders"
              :action="uploadUrl"
              name="file"
            >
              <Button icon="ios-cloud-upload-outline" :loading="uploading"
                >导入</Button
              >
            </Upload>
          </div>
        </div>
        <Row
          class="margin-bottom-10"
          type="flex"
          justify="space-between"
          :gutter="24"
        >
          <Col :span="20">
            <Row :gutter="16" type="flex">
              <Col>
                <Input
                  v-model="search.UserName"
                  placeholder="请输入要查找的登录账号"
                ></Input>
              </Col>
              <Col>
                <Input
                  v-model="search.Name"
                  placeholder="请输入要查找的姓名"
                ></Input>
              </Col>
              <Col>
                <Button
                  icon="ios-search"
                  type="primary"
                  @click="savesearch"
                  style="margin-right: 10px"
                  >查询</Button
                >
                <Button @click="clearSearch">查看全部</Button>
              </Col>
            </Row>
          </Col>
          <Col>
            <Button icon="md-add" type="primary" @click="addModdel"
              >添加</Button
            >
            <Button
              icon="md-refresh"
              style="margin-left: 10px"
              @click="getadministratorList"
              >刷新</Button
            >
          </Col>
        </Row>
        <Table
          stripe
          border
          :data="administratorObj.list"
          :loading="administratorObj.loading"
          :columns="administratorObj.columns"
        >
          <template slot-scope="{ row, index }" slot="roleInfoList">
            <div style="display: flex">
              <div
                style="padding: 5px"
                v-for="(item, index1) in row.roleInfoList"
                :key="index1"
              >
                {{ item.name }}
              </div>
            </div>
          </template>
        </Table>
        <div class="pageWrap">
          <Page
            :total="administratorObj.count"
            :page-size="administratorObj.pageSize"
            show-total
            :current.sync="administratorObj.current"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-sizer
            show-elevator
          ></Page>
        </div>
      </Card>
    </Row>
    <Modal
      v-model="administratorModal"
      :title="administratorObj.title"
      :mask-closable="false"
      :closable="false"
    >
      <Form
        :model="administratorForm"
        :label-width="120"
        ref="administratorForm"
        :rules="ruleValidate"
      >
        <FormItem label="账号" prop="userName">
          <Input
            v-model="administratorForm.userName"
            placeholder="账号"
          ></Input>
        </FormItem>
        <FormItem label="姓名" prop="name">
          <Input v-model="administratorForm.name"></Input>
        </FormItem>
        <FormItem label="手机号码" prop="phone">
          <Input v-model="administratorForm.phone"></Input>
        </FormItem>
        <!-- <FormItem label="角色" prop="roleList">
          <Select
            v-model="administratorForm.roleList"
            multiple
            style="width: 100%"
            placeholder="请选择账号角色"
          >
            <Option v-for="item in areaCodes" :value="item.id" :key="item.id">{{
              item.name
            }}</Option>
          </Select>
        </FormItem> -->
        <FormItem label="所属单位" prop="companyName">
          <Input v-model="administratorForm.companyName"></Input>
        </FormItem>
        <FormItem label="所属街道" prop="street" v-if="showFornTtem">
          <Select
            clearable
            v-model="administratorForm.street"
            style="width: 100%"
            placeholder="请选择所属街道"
          >
            <Option
              v-for="item in reetList"
              :value="item.value"
              :key="item.id"
              >{{ item.code }}</Option
            >
          </Select>
        </FormItem>
        <!-- <FormItem label="性别" prop="sex">
          <RadioGroup v-model="administratorForm.sex">
            <Radio :label="1">男</Radio>
            <Radio :label="2">女</Radio>
            <Radio label="2">业务员</Radio>
            <Radio label="3">副领导</Radio>
            <Radio label="4">领导</Radio>
          </RadioGroup>
        </FormItem> -->
        <FormItem label="身份证号" prop="identityCard">
          <Input v-model="administratorForm.identityCard"></Input>
        </FormItem>
        <FormItem label="住址" prop="address">
          <Input type="textarea" v-model="administratorForm.address"></Input>
        </FormItem>
        <!-- <FormItem label="职能" prop="position">
          <RadioGroup v-model="administratorForm.position">
            <Radio label="驾驶员">驾驶员</Radio>
            <Radio label="志愿者">志愿者</Radio>
            <Radio label="政府人员">政府人员</Radio>
          </RadioGroup>
        </FormItem> -->
        <!-- <FormItem label="部门" prop="orgList">
          <Select
            v-model="administratorForm.orgList"
            style="width: 100%"
            filterable
            ref="select2"
            @on-open-change="clearfilterable2"
          >
            <Option
              v-for="item in detSelectList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem> -->
      </Form>
      <div slot="footer">
        <span>
          <Button
            type="primary"
            @click="saveadministrator"
            v-if="administratorForm.id"
            >保存</Button
          >
          <Button type="primary" @click="addadministrator" v-else>添加</Button>
        </span>
        <Button @click="formcancel('administratorForm', 'administratorModal')"
          >关闭</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from "axios";
import util from "@/libs/util";
import imgUpLoad from "@/views/my-components/img-upLoad/img-upLoad";
import Editor from "@/views/my-components/quill/quill";
import { mapGetters } from "vuex";
let auth = sessionStorage.getItem("auth");
let administratorForm = {
  userName: "", //用户名
  name: "", //姓名
  address: "", //住址
  position: "", //职能
  sex: 1, //1男2女
  phone: "", //手机
  identityCard: "", //身份证
  companyName: "",
  street: "", //街道
  roleList: [], //角色
  orgList: [], //部门
};

let search = {
  UserName: "",
  Name: "",
};
export default {
  name: "administrator",
  components: {
    imgUpLoad,
    Editor,
  },
  computed: {
    pageName() {
      return util.getCurrentTitle(this);
    },
  },
  data() {
    return {
      uploadData: {
        // isReuse: true,//导入重复跳过不提示异常
        // isPTU: false,
      },
      uploadUrl:
        util.baseApi.ajaxUrl +
        "/hlapi/SysUser/UserInfoInfoImport?isReuse=true&isPTU=false",
      uploading: false,
      downLoding: false,
      Uploadhearders: {
        Authorization: `Bearer ${auth}`,
      },
      showFornTtem: false,
      adminType: "",
      reetList: [],
      CallerList: [],
      spinShow: false,
      listStyle: {
        width: "430px",
        height: "300px",
      },
      showmatter: false,
      departmentList: [],
      matterParams: {
        title: "",
        userID: "",
        departmentID: "",
      },
      matterData: [],
      matterExist: [],
      isAdmin: false,
      detSelectList: [],
      areaCodes: [],
      showDepartment: true,
      administratorModal: false,
      administratorForm: Object.assign(administratorForm),
      administratorObj: {
        list: [],
        columns: [
          {
            title: "登录账号",
            align: "center",
            key: "userName",
          },
          {
            title: "姓名",
            align: "center",
            key: "name",
          },
          {
            title: "所属街道",
            align: "center",
            key: "street",
          },
          {
            title: "所属单位",
            align: "center",
            key: "companyName",
          },
          {
            title: "用户绑定的手机号",
            align: "center",
            key: "phone",
          },
          // {
          //   title: "性别",
          //   align: "center",
          //   key: "sex",
          //   render: (h, params) => {
          //     return h("div", [
          //       // h("Icon", {
          //       //   class: "demo-spin-icon-load",
          //       //   props: {
          //       //     type: "load-c",
          //       //     size: 60,
          //       //   },
          //       // }),
          //       h(
          //         "div",
          //         { style: {} },
          //         params.row.sex == 1 ? "男" : params.row.sex == 2 ? "女" : ""
          //       ),
          //     ]);
          //   },
          // },
          {
            title: "身份证",
            align: "center",
            width: 120,
            key: "identityCard",
          },
          {
            title: "住址",
            align: "center",
            key: "address",
          },
          // {
          //   title: "角色",
          //   align: "center",
          //   slot: "roleInfoList",
          //   width: 300,
          // },
          // {
          //   title: "用户类型",
          //   key: "userType"
          // },
          {
            title: "操作",
            align: "center",
            minWidth: 220,
            key: "action",
            render: (h, params) => {
              return h("div", [
                h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "您确认重置密码？",
                      transfer: true,
                    },
                    on: {
                      "on-ok": () => {
                        this.restfun(params.row.id);
                      },
                    },
                  },
                  [
                    h(
                      "Button",
                      {
                        props: {
                          type: "warning",
                        },
                        style: {
                          marginRight: "10px",
                        },
                      },
                      "重置密码"
                    ),
                  ]
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                    },
                    style: {
                      marginRight: "10px",
                    },
                    on: {
                      click: () => {
                        this.getadministrator(params.row.id);
                      },
                    },
                  },
                  "查看"
                ),
                h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "您确认删除该信息？",
                      transfer: true,
                    },
                    on: {
                      "on-ok": () => {
                        this.deladministrator(params.row.id);
                      },
                    },
                  },
                  [
                    h(
                      "Button",
                      {
                        props: {
                          type: "error",
                        },
                        style: {
                          //   display: this.isAdmin ? "inline-block" : "none",
                        },
                      },
                      "删除"
                    ),
                  ]
                ),
              ]);
            },
          },
        ],
        title: "",
        current: 1,
        count: 0,
        loading: true,
        pageSize: 10,
      },
      ruleValidate: {
        // roleList: [
        //   {
        //     required: true,
        //     message: "角色必须要选",
        //     trigger: "blur",
        //     type: "array",
        //   },
        // ],
        userType: [
          {
            required: true,
            message: "用户类型必选一种",
            trigger: "blur",
          },
        ],
        identityName: [
          {
            required: true,
            message: "身份证名字不能为空",
            trigger: "blur",
          },
        ],
        identity: [
          {
            required: true,
            message: "身份证号码不能为空",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "登录账号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: "blur",
          },
        ],
      },
      search: Object.assign({}, search),
    };
  },
  methods: {
    downloadfile() {
      this.downLoding = true;
      const elink = document.createElement("a");
      elink.style.display = "none";
      elink.download = "导入模板表格";
      elink.href = "https://qnc.qjnice.com/1651913784438人员导入.xlsx";
      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
      this.downLoding = false;
    },
    handleBeforeUpload(e) {
      this.uploading = true;
    },
    handleSuccess(e) {
     
      let { message, data, code } = e;
      if (code == "500") {
        this.uploading = false;
        // this.$Message.error(message);
        this.$Message.error({
          content: message,
          duration: 0,
          closable: true,
        });
        return;
      }
      this.uploading = false;
      this.getadministratorList();
      this.$Message.success("导入成功！");
    },
    handleError(e) {
      this.uploading = false;
      this.$Message.error("导入失败！");
    },
    restfun(id) {
      axios
        .post(`/hlapi/SysUser/ResetUserPwd`, { id: id })
        .then((res) => {
          this.$Message.success("重置成功");
          this.getadministratorList();
        })
        .catch((err) => {
          this.$Message.error(err);
        });
    },
    // 获取角色列表
    getAreaCodes() {
      axios.get(`/hlapi/SysRole/UserSelector`).then((res) => {
        this.areaCodes = res.data;
      });
    },
    // 获取街道列表
    getstreetList() {
      axios
        .get(`/hlapi/SysDictType/DictDataList`, {
          params: {
            TypeId: "274063875657797",
          },
        })
        .then((res) => {
          // street
          this.reetList = res.data;
        });
    },
    clearSearch() {
      this.search = {};
      this.savesearch();
    },
    savesearch() {
      this.administratorObj.current = 1;
      this.getadministratorList();
    },
    pageSizeChange(v) {
      this.administratorObj.pageSize = v;
      this.getadministratorList();
    },
    stateChange(v) {
      this.administratorForm.state = v;
    },
    formcancel(...params) {
      util.resetData(this, ...params);
    },
    addModdel() {
      this.administratorObj.title = "添加信息";
      this.administratorForm = {};
      this.administratorForm = Object.assign(administratorForm);
      this.administratorForm.street = JSON.parse(
        sessionStorage.getItem("userdata")
      ).street;
      this.administratorModal = true;
    },
    //保存
    saveadministrator() {
      this.$refs.administratorForm.validate((valid) => {
        if (valid) {
          let temp = JSON.parse(JSON.stringify(this.administratorForm));
          temp.street = temp.street || "";
          temp.isPTU = false;
          axios.put(`/hlapi/SysUser/User`, temp).then((res) => {
            if (res.success) {
              this.$Message.success("操作成功");
              this.formcancel("administratorForm", "administratorModal");
              this.getadministratorList();
            } else {
              this.$Message.warning(res.message);
            }
          });
        } else {
          this.$Message.warning("表单认证失败");
        }
      });
    },
    //添加
    addadministrator() {
      this.$refs.administratorForm.validate((valid) => {
        if (valid) {
          //  JSON.parse(sessionStorage.getItem("userdata")).street;
          let temp = JSON.parse(JSON.stringify(this.administratorForm));
          temp.street = temp.street || "";
          temp.adminType = 2;
          temp.isPTU = false;
          axios.post(`/hlapi/SysUser/User`, temp).then((res) => {
            if (res.success) {
              this.$Message.success("操作成功");
              this.formcancel("administratorForm", "administratorModal");
              this.getadministratorList();
            } else {
              this.$Message.warning(res.message);
            }
          });
        } else {
          this.$Message.warning("表单认证失败");
        }
      });
    },
    //分页列表
    getadministratorList() {
      // this.$store.commit("app/initSearch", {
      //   page: {
      //     current: this.administratorObj.current,
      //     pageSize: this.administratorObj.pageSize
      //   },
      //   search: this.search
      // });
      this.administratorObj.loading = true;

      axios
        .get(`/hlapi/SysUser/UserPage`, {
          params: {
            IsPTU: false,
            PageNo: this.administratorObj.current,
            PageSize: this.administratorObj.pageSize,
            UserName: this.search.UserName,
            Name: this.search.Name,
            Street: JSON.parse(sessionStorage.getItem("userdata")).street,
            AdminType: 2,
          },
        })
        .then((e) => {
          let res = e.data;
          this.administratorObj.list = res.rows;
          this.administratorObj.count = res.totalRows;
          this.administratorObj.loading = false;
        });
    },
    //查看详情
    getadministrator(id) {
      axios.get(`/hlapi/SysUser/User/${id}`).then((res) => {
        let data = res.data;
        this.administratorObj.title = "查看信息";
        // this.administratorForm=data
        this.administratorForm = data;
        this.administratorModal = true;
      });
    },
    //删除
    deladministrator(id) {
      let data = {
        id: id,
      };
      axios.delete(`/hlapi/SysUser/User`, { data: data }).then((res) => {
        if (res.success) {
          this.$Message.success("操作成功");
          this.getadministratorList();
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    pageChange(v) {
      this.administratorObj.current = v;
      this.getadministratorList();
    },
  },
  mounted() {
    this.getAreaCodes();
    this.getstreetList();
    this.getadministratorList();
    this.showFornTtem =
      JSON.parse(sessionStorage.getItem("userdata")).adminType == 1;
  },
  created() {
    this.showFornTtem =
      JSON.parse(sessionStorage.getItem("userdata")).adminType == 1;
  },
  activated() {},
};
</script>
